<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录调试工具</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        form {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .log-container {
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 500px;
            overflow-y: auto;
            background-color: #f9f9f9;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
        }
        .log-entry {
            margin-bottom: 5px;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        .log-info {
            color: #333;
        }
        .log-error {
            color: #e74c3c;
            background-color: #fadbd8;
        }
        .log-debug {
            color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>登录调试工具</h1>
        
        <form id="loginForm">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" value="admin" required>
            
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" value="abc@123456" required>
            
            <button type="submit">发送登录请求</button>
        </form>
        
        <h2>日志输出</h2>
        <div id="logContainer" class="log-container"></div>
    </div>

    <script>
        // 日志工具
        const logContainer = document.getElementById('logContainer');
        
        function log(message, type = 'info') {
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry log-${type}`;
            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }
        
        function logObject(obj, prefix = '') {
            try {
                const str = JSON.stringify(obj, null, 2);
                str.split('\n').forEach(line => {
                    log(`${prefix}${line}`, 'debug');
                });
            } catch (e) {
                log(`${prefix}无法序列化对象: ${e.message}`, 'error');
            }
        }
        
        // 模拟axios的基本功能
        async function postRequest(url, data, config = {}) {
            log(`准备发送POST请求到: ${url}`, 'debug');
            
            // 处理URLSearchParams
            let body = data;
            let headers = {
                'Content-Type': 'application/json;charset=utf-8',
                ...config.headers
            };
            
            if (data instanceof URLSearchParams) {
                body = data.toString();
                headers['Content-Type'] = 'application/x-www-form-urlencoded';
            }
            
            log(`请求头:`, 'debug');
            logObject(headers, '  ');
            
            log(`请求数据: ${body}`, 'debug');
            
            try {
                log(`开始发送请求...`, 'debug');
                const response = await fetch(url, {
                    method: 'POST',
                    headers: headers,
                    body: body
                });
                
                log(`收到响应，状态码: ${response.status}`, 'debug');
                
                // 检查响应是否成功
                if (!response.ok) {
                    const errorText = await response.text();
                    log(`请求失败: ${errorText}`, 'error');
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                // 尝试解析JSON响应
                try {
                    const data = await response.json();
                    log(`响应数据解析成功`, 'debug');
                    log(`响应数据类型: ${typeof data}`, 'debug');
                    if (typeof data === 'object') {
                        log(`响应数据包含的字段: ${Object.keys(data).join(', ')}`, 'debug');
                        logObject(data, '  ');
                    }
                    return data;
                } catch (jsonError) {
                    const text = await response.text();
                    log(`无法解析JSON响应: ${jsonError.message}`, 'error');
                    log(`响应文本: ${text}`, 'debug');
                    throw new Error(`Invalid JSON response`);
                }
            } catch (error) {
                log(`请求异常: ${error.message}`, 'error');
                throw error;
            }
        }
        
        // 登录测试函数
        async function testLogin(username, password) {
            log('===== 开始登录测试 =====');
            
            try {
                // 构建请求参数
                const params = new URLSearchParams();
                params.append('username', username);
                params.append('password', password);
                
                log(`登录参数: ${params.toString()}`);
                
                // 测试两种URL格式
                log('\n测试1: 使用相对URL /api/auth/token');
                try {
                    const result1 = await postRequest('/api/auth/token', params, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    });
                    log(`测试1成功！loginData不为undefined`, 'debug');
                    logObject(result1, '  ');
                } catch (error) {
                    log(`测试1失败: ${error.message}`, 'error');
                }
                
                log('\n测试2: 使用完整URL http://localhost:5176/api/auth/token');
                try {
                    const result2 = await postRequest('http://localhost:5176/api/auth/token', params, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    });
                    log(`测试2成功！loginData不为undefined`, 'debug');
                    logObject(result2, '  ');
                } catch (error) {
                    log(`测试2失败: ${error.message}`, 'error');
                }
                
                // 测试3: 直接访问后端API
                log('\n测试3: 直接访问后端API http://localhost:8000/auth/token');
                try {
                    const result3 = await postRequest('http://localhost:8000/auth/token', params, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    });
                    log(`测试3成功！loginData不为undefined`, 'debug');
                    logObject(result3, '  ');
                } catch (error) {
                    log(`测试3失败: ${error.message}`, 'error');
                }
                
            } catch (error) {
                log(`登录测试过程中发生错误: ${error.message}`, 'error');
            } finally {
                log('===== 登录测试结束 =====');
            }
        }
        
        // 表单提交处理
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 清空日志容器
            logContainer.innerHTML = '';
            
            // 执行登录测试
            testLogin(username, password);
        });
        
        log('登录调试工具已加载完成，请输入用户名和密码，然后点击"发送登录请求"按钮开始测试。');
    </script>
</body>
</html>